<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="js/jquery.min.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="图标名.ico" />
</head>
<body style="margin: 0px;">
<div style="overflow: auto; background: -webkit-linear-gradient(left top, #2f89eb, #2ee0da); height: 100vh; width: 100%;align-items: center; display:flex">
    <div style="display:flex; justify-content:center;width:100%;">
        <div style="background-image: url('image/backgroundImage.jpg');background-repeat: no-repeat;background-size: 100% 100%; height: 55vh; width: 55%; display:flex;">
            <div style="position:relative; flex:1">
                <div style="position: absolute; top: 50%; right: 20px; left: 60px; z-index: 1000; text-align: center; transform: translateY(-50%);">
                    <img alt="logo" src="/image/cLogo.png" style="width: 80px; height: auto; margin-bottom: 10px;">
                    <h3 style="color: #fff; font-weight: bold; font-size: 30px; text-align: center; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);">
                        山西青职院
                        <br/>
                        WPS考题管理系统
                    </h3>
                </div>
                <div style=" position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;"></div>
            </div>
            <div class="loginRt" style=" width: 50%; padding: 50px;">
                <div class="rtBox" style="width: 90%;height: 80%;margin-top: 50px;text-align:center">
                    <h3 class="loginTab" style="margin-bottom: 30px;font-size: 24px;">
                        用户登录
                    </h3>
                    <form id="formLogin" method="post">
                        <div style="margin-bottom: 50px;">
                            <div class="ant-form-item-control" style="margin-bottom: 24px;">
                                <span class="ant-form-item-children"
                                      style="left: 12px;top: 50%;z-index: 2;color: rgba(0, 0, 0, 0.65);line-height: 0;">
                                       <i data-v-1ecd471f="" slot="prefix" aria-label="图标: user"
                                          style="color: rgba(0, 0, 0, 0.25);">
                                           <svg data-v-1ecd471f="" viewBox="64 64 896 896" data-icon="user" width="1em"
                                                height="1em" fill="currentColor" aria-hidden="true" class="">
                                               <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z">
                                               </path>
                                           </svg>
                                       </i>
                                 </span>
                                <input placeholder="账号" type="text" id="username" name="username"
                                       data-options="required:true"
                                       style="padding: 6px 11px;font-size: 16px;width: 60%;line-height: 1.5;border: none !important;border-bottom: 1px solid #d9d9d9 !important;">
                            </div>
                        </div>
                        <div style="margin-bottom: 10px; border: 0px red solid;">
                            <div class="ant-form-item-control" style="margin-bottom: 24px;">
                                <span class="ant-form-item-children"
                                      style="left: 12px;top: 50%;z-index: 2;color: rgba(0, 0, 0, 0.65);line-height: 0;">
                                       <i data-v-1ecd471f="" slot="prefix" aria-label="图标: lock"
                                          style="color: rgba(0, 0, 0, 0.25);">
                                           <svg data-v-1ecd471f="" viewBox="64 64 896 896" data-icon="lock" width="1em"
                                                height="1em" fill="currentColor" aria-hidden="true" class="">
                                               <path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"></path>
                                           </svg>
                                        </i>
                                </span>
                                <input placeholder="密码" type="password" size="large" id="password"
                                       name="password"
                                       style="padding: 6px 11px;font-size: 16px;width: 60%;line-height: 1.5;border: none !important;border-bottom: 1px solid #d9d9d9 !important;">
                            </div>
                        </div>

                        <div style="margin-bottom: 20px; border: 0px red solid;">
                            <button type="button" onclick="login()"
                                    style="font-size:16px;height:40px;width:60%;color:#FFF;background-color:#1890ff;border: 1px solid transparent;border-radius:4px; cursor: pointer;">
                                <span>登 录</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            login();
        }
    });

    function login() {

        let username = $('#username').val();
        let password = $('#password').val();
        if (username == '') {
            alert('请输入账号');
            return
        }
        if (password == '') {
            $('#password').focus();
            return
        }

        $.ajax({
            url: '/login',
            data: $('#formLogin').serialize(),                 //将表单数据序列化，格式为name=value
            method: 'post',
            success: function (data) {
                if (data.code == 200) {
                    let username = $('#username').val();
                    window.location.replace("/main/index.html");
                } else {
                    alert(data.message);
                }
            },
            error: function () {
                console.log("未知异常，请与管理员联系！");
            },

        });
    }
</script>
<script>
    try {
        overtime();
    } catch(err) {
        console.log('+++++++++++++++++'+err)
    }
</script>
</body>
</html>